<template>
  <aside :style="{ '--translate-x': isClose ? '0%' : '-120%' }">
    <div class="sublabel">
      <img src="@/assets/images/home/menu-01.png" />
      <span>池州涓桥变电站</span>
    </div>

    <div class="top">
      <div>
        <div class="top-item">
          <div>场站等级</div>
          <div>
            <span class="font-bold text-[1.125rem]">
              {{ initData.stationLevel || 0 }}
            </span>
            KV
          </div>
        </div>
        <div class="top-item">
          <div class="font-bold text-[1.125rem]">
            {{ initData.deviceNum || 0 }}
          </div>
          <div>设备数量</div>
        </div>
      </div>
      <img src="@/assets/images/home/top-center-bg.png" />
      <div class="text-right">
        <div class="top-item">
          <div>场站主变容量</div>
          <div>
            <span class="font-bold text-[1.125rem]">
              {{ initData.stationMainCapacity || 0 }}
            </span>
            MVA
          </div>
        </div>
        <div class="top-item">
          <div class="font-bold text-[1.125rem]">
            {{ initData.deviceTypeNum || 0 }}
          </div>
          <div>设备类型数量</div>
        </div>
      </div>
    </div>

    <div class="bbox">
      <div v-for="item in list" :key="item.type" class="flex">
        <img class="mr-[1rem] w-[3rem]" :src="item.ubg" />
        <div>
          <div>{{ item.name }}</div>
          <div class="font-bold text-[1.125rem]">
            {{ initData[item.field] }}
          </div>
        </div>
      </div>
    </div>

    <div class="sublabel">
      <img src="@/assets/images/home/menu-02.png" />
      <span>巡视概况</span>
    </div>
    <div class="center">
      <div
        v-for="(item, index) in nav"
        :key="index"
        class="center-item"
        @click="goPage(item)"
      >
        <img :src="item.icon" />
        <div class="name">{{ item.name }}</div>
        <div class="nums">{{ initData[item.field] }}</div>
      </div>
    </div>

    <div class="sublabel">
      <img src="@/assets/images/home/menu-03.png" />
      <span>设备缺陷 TOP5</span>
    </div>
    <div v-if="initData.defectTop5List?.length !== 0">
      <div v-for="(item, index) in initData.defectTop5List" :key="index">
        <div class="progress">
          <div class="progress-word">
            <div class="bg-no" :data-no="index + 1"></div>
            {{ item.defectName }}
          </div>
          <div class="progress-nums">{{ item.defectNum }}</div>
        </div>
        <a-progress
          :percent="item.defectNum"
          :show-info="false"
          strokeColor="#00796a"
        />
      </div>
    </div>
    <empty v-else></empty>

    <div class="flag-btn up" @click="changeHide">
      <CaretLeftOutlined />
    </div>
  </aside>

  <div class="flag-btn down" v-if="!isClose" @click="changeHide">
    <CaretRightOutlined />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { statistic } from './serve.api'
import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons-vue'

const router = useRouter()

const isClose = ref(false)
const initData = ref({})
const list = ref([
  {
    ubg: new URL('../../assets/images/home/icon-01.png', import.meta.url).href,
    name: '接入摄像机',
    color: '',
    nums: '12',
    unit: '',
    url: '',
    type: '',
    field: 'cameraNum'
  },
  {
    ubg: new URL('../../assets/images/home/icon-02.png', import.meta.url).href,
    name: '无人机点位数量',
    color: '',
    nums: '24',
    unit: '',
    url: '',
    type: '',
    field: 'uavPointNum'
  },
  {
    ubg: new URL('../../assets/images/home/icon-03.png', import.meta.url).href,
    name: '分割设备类型数量',
    color: '',
    nums: '10',
    unit: '',
    url: '',
    type: '',
    field: 'seqDeviceTypeNum'
  },
  {
    ubg: new URL('../../assets/images/home/icon-04.png', import.meta.url).href,
    name: '大模型算法数量',
    color: '',
    nums: '2',
    unit: '',
    url: '',
    type: '',
    field: 'algNum'
  }
])

const nav = ref([
  {
    icon: new URL('../../assets/images/home/icon-02.png', import.meta.url).href,
    name: '无人机巡视任务',
    nums: '0',
    unit: '',
    url: '/patrolTaskManage/uavPatrolTask',
    type: '',
    field: 'uavJobNum'
  },
  {
    icon: new URL('../../assets/images/home/icon-05.png', import.meta.url).href,
    name: '多终端巡视任务',
    nums: '0',
    unit: '',
    url: '/patrolTaskManage/multipleTerminalPatrolTask',
    type: '',
    field: 'multiTerminalJobNum'
  },
  {
    icon: new URL('../../assets/images/home/icon-06.png', import.meta.url).href,
    name: '缺陷总数量',
    nums: '0',
    unit: '',
    url: '/patrolResult/defectManage',
    type: '',
    field: 'defectTotalNum'
  }
])

function changeHide() {
  isClose.value = !isClose.value
}

function goPage(item) {
  router.push(item.url)
}

onMounted(async () => {
  try {
    initData.value = await statistic()
  } catch (error) {
    console.error(error)
  }
})
</script>

<style lang="less" scoped>
aside {
  position: absolute;
  top: 50%;
  left: 0.625rem;
  z-index: 1;
  padding: 1rem 1.5rem;
  width: 24.375rem;
  background-color: rgb(242 243 245);
  border: 0.0625rem solid rgb(255 255 255);
  border-radius: 0.5rem;
  transition: all 0.5s ease;
  box-sizing: content-box;
  transform: translate(var(--translate-x), -50%);

  .sublabel {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;

    span {
      font-size: 1.125rem;
      color: #1d2129;
      font-weight: bold;
    }

    img {
      margin-right: 0.25rem;
      width: 1.25rem;
      height: 1.25rem;
    }
  }

  .top {
    display: grid;
    margin-bottom: 1rem;
    height: 8.25rem;
    background-size: 100% 100%;
    grid-template-columns: repeat(3, 1fr);
    background-image: url('@/assets/images/home/top-bg.png');

    &-item {
      padding: 0.625rem 1rem;
      font-size: 00.875rem;
    }
  }

  .bbox {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
    margin-bottom: 1rem;
  }

  .center {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
    margin-bottom: 1rem;

    &-item {
      position: relative;
      text-align: center;
      background: linear-gradient(to top, #fff, rgb(242 243 245) 100%);
      cursor: pointer;

      img {
        margin: auto;
        width: 2.5rem;
      }

      .name {
        margin: 0.625rem 0 0.25rem;
      }

      .nums {
        margin-bottom: 1rem;
        font-weight: bold;
        font-size: 1.25rem;
      }

      &::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0.0625rem;
        background-color: #00796a;
        content: '';
      }
    }
  }

  .progress {
    display: flex;
    justify-content: space-between;
    line-height: 1rem;
    margin-top: 1rem;

    &-word {
      position: relative;
      display: flex;
      align-items: center;

      .bg-no {
        margin-right: 0.375rem;
        width: 1.0625rem;
        height: 100%;
        color: #00796a;
        background-position: left bottom;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url('@/assets/images/home/bg-no.png');

        &::before {
          content: attr(data-no);
          padding-left: 0.5rem;
          font-size: 0.875rem;
          font-weight: 700;
        }
      }
    }

    &-nums {
      font-size: 1rem;
      color: #1d2129;
      font-weight: 700;
    }
  }
}

.close {
  width: 1rem;
  cursor: pointer;
}

.flag-btn {
  height: 6.25rem;
  border-radius: 00.25rem;
  border-left: 1.5rem solid rgb(242 243 245);
  border-top: 1.125rem solid transparent;
  border-bottom: 1.125rem solid transparent;
  transform: translateY(-50%);
  cursor: pointer;

  span {
    position: absolute;
    top: 40%;
    left: -1.25rem;
    font-size: 1.125rem;
  }
}

.up {
  position: absolute;
  top: 50%;
  right: -1.875rem;
}

.down {
  position: fixed;
  top: 50%;
  left: 0.5rem;
}
</style>
